<script lang="ts" setup>
    import { ref, reactive, computed, watch, onMounted } from 'vue';
    import TimePicker from '@/arco-components/picker.vue'; 
    import {IconPlusCircleFill} from '@arco-design/web-vue/es/icon';
    import FilterCondition from '../../../../indexTreeGraph/components/FilterCondition/index.vue'
    import DatePickerType from '../../../../components/DatePickType/index.vue'
    import API from '@/services';
    import _ from 'lodash'
    import { useRouter, useRoute} from 'vue-router';
    import { Message } from '@arco-design/web-vue';
    const props= defineProps({
        getIndexTreeCard: {
            type: Array,
        },
        metricsTreeId: {
            type: String || Number
        }
    })
    const route = useRoute();
    const treeId = route.query.id
    const visible = ref<boolean>()
    const dimensionOption = ref<any>()
    const datePickType = ref()
    const notSameDatePicker = ref<boolean>(true)
    const emit = defineEmits(['gloupFilterSure'])
    // 获取维度数据
    const getDimensionOption = async (treeId:any) => {
        try {
            const {code, data} = await API.metricsTree.getGlobalConditions({
                treeId
            })
            if (code === 200) {
                dimensionOption.value = data
            }
        } catch (error) {
            
        }
    }
    // 点击确定
    const onOk = () => {
        const conditionsArr = formData.conditions?.map((item:any)=>{
            return {
                ...item.value
            }
        })
        if (conditionsArr?.length) {
           const hasData = conditionsArr?.filter((item:any) => {
                return !item.dimId || !item.values?.length
            })
            if (hasData?.length) {
                Message.warning('选择的维度筛选有未选项')
                return;
            }
            
        }
        const params= {
            conditions: conditionsArr,
            dateTime: formData.dateTime,
            timeUnit: datePickType.value
        }
        visible.value = false
        emit('gloupFilterSure',params)
    };
    const formData = reactive<any>({
        dateTime: '',
        conditions: []
    })
     const handleAddFilter = () => {
        formData.conditions.push(
            {
                value: {
                    fieldName: '',
                    // opType: 'IN',
                    values: [],
                    dimId:'',
                    dimName:'',
                    selectLabel: []
                }
            }
            
        );

    };
    const onRemoveList = (index: number) => {
        formData.conditions.splice(index, 1);
    };
    const onCloseModal = () => {
        visible.value = false
    }
    const visibleFilter = () => {
        visible.value = true
    }
    const changePickerValue = () => {

    }
    const isAllEqual = (array:any) => {
        if (array.length > 0) {
            const hasTimeMode = array.some((item:any)=> item.dateCondition.timeUnit != array[0].dateCondition.timeUnit)
            if (hasTimeMode) {
                return false
            } else {
                return true
            }
        } else {
            return true;
        }
    }
    const handleClearAllData = () => {
        formData.conditions = []
    }
    watch(
        () => props.getIndexTreeCard,
        (val:any) => {
            if (isAllEqual(val)) {
                datePickType.value =  val[0].dateCondition?.timeUnit
            } else {
                notSameDatePicker.value = false
            }
        }
    )
    watch(
        ()=>props.metricsTreeId,
        (val) => {
            getDimensionOption(val)
        }
    )
    defineExpose({
        visibleFilter
    })

</script>


<template>
    <a-drawer
        :visible="visible" 
        @ok="onOk" 
        @cancel="onCloseModal" 
        :esc-to-close = "false"
        :mask-closable="false"
        placement="right"
        width="566px"
        unmountOnClose
        title="全局筛选"
    >
        <a-form-item
            show-colon
            label="数据时间"
            v-if="notSameDatePicker"
        >
        <DatePickerType 
            v-model="formData.dateTime"
           :timeType="datePickType"
            @pickerValue="changePickerValue"
        />
        </a-form-item>
        <div>
            <div class="dimension-top">
                <span class="fw">维度</span>
                <a-button type="text" v-show="formData.conditions?.length" @click="handleClearAllData">清空</a-button>
            </div>
            <div class="dis-flex mt-12">
                <span class="filter-line"></span>
                <div class="ml-6" :style="{width: 'calc(100% - 3px)'}">
                    <FilterCondition
                        v-for="(item, index) of formData.conditions"
                            v-model="item.value"
                            :key="index"
                            :disable-remove="index === 0"
                            :detailDrewer = 'true'
                            :containCondition="[]"
                            :dimensionOption="dimensionOption?.dimOptions"
                            @remove="() => onRemoveList(index)"
                            size="medium"
                    />
                    <div class="add-icon">
                        <icon-plus-circle-fill 
                            style="color: #3C6EFF; 
                            cursor: pointer;"
                            size="16"
                            @click="handleAddFilter"
                        />
                    </div>
                </div>
            </div>
        </div>
    </a-drawer>
</template>

<style lang="scss" scoped>

.filter-line {
    width: 3px;
    background: #E8EBF2;
    height: inherit;
}
.dimension-top {
    display: flex;
    justify-content: space-between;
}
</style>